// 报表
<template>
  <el-row class="content">
    <div style="padding-left:10px;">
      两周报表
    </div>
    <div v-if="memberHistory && type === 0">
      <table class="myTable" v-for="(subList, index) in list" :key="'list'+index">
        <thead>
        <tr>
          <th>
            日期
          </th>
          <th>
            注数
          </th>
          <th>
            下注金额
          </th>
          <th>
            佣金
          </th>
          <th>
            盈亏
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, subIndex) in subList" :key="'subList'+subIndex" class="myTableTr" :class="{'myTableTfoot':subIndex === 7}">
          <td>
            <!--日期-->
            <span :class="{'blueSpan':item.time === nowTime}" class="myTableTime" @click="getHisDet(item.time, item.open_date)">
              {{item.open_date}}
            </span>
          </td>
          <td>
            <!--注数-->
            {{item.count}}
          </td>
          <td>
            <!--下单金额-->
            {{item.sum_amount}}
          </td>
          <td>
            <!--佣金-->
            {{item.sum_comm}}
          </td>
          <td>
            <span :class="parseFloat(item.sum_result) >= 0?'blueSpan':'redSpan'">
              {{item.sum_result}}
            </span>
          </td>
        </tr>
        </tbody>
      </table>

    </div>
    <div v-if="hisDetails && type === 1">
      <table class="myTable">
        <thead>
        <tr>
          <th>
            类型
          </th>
          <th>
            注数
          </th>
          <th>
            下注金额
          </th>
          <th>
            佣金
          </th>
          <th>
            盈亏
          </th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in hisDetails.list" :key="'hisDetails'+index" class="myTableTr">
            <td>
              <span class="myTableTime" @click="goBalanced(item)">
                {{item.t}}
              </span>
            </td>
            <td>
              {{item.order_count}}
            </td>
            <td>
              {{item.sum_order_amount}}
            </td>
            <td>
              {{item.sum_comm_amount}}
            </td>
            <td>
              <span :class="parseFloat(item.sum_result) >= 0?'blueSpan':'redSpan'">
                {{item.sum_result}}
              </span>
            </td>
          </tr>
          <tr class="myTableTfoot">
            <td>
              {{hisDetails.总计.t}}
            </td>
            <td>
              {{hisDetails.总计.order_count}}
            </td>
            <td>
              {{hisDetails.总计.sum_order_amount}}
            </td>
            <td>
              {{hisDetails.总计.sum_comm_amount}}
            </td>
            <td>
               <span :class="parseFloat(hisDetails.总计.sum_result) >= 0?'blueSpan':'redSpan'">
                  {{hisDetails.总计.sum_result}}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射

  export default {
    inject: ['reload'],
    computed: {
      ...mapGetters(['memberHistory']),
      list() {
        const hisLength = Object.keys(this.memberHistory).length
        const halfHisLength = parseInt(hisLength / 2) - 1 // 获取14天的数据后除以2 得到两周的数据
        let tempHis = []
        const hisList = []
        let i = 0
        for (const key in this.memberHistory) {
          this.memberHistory[key]['time'] = key
          tempHis.push(this.memberHistory[key])
          if (i === halfHisLength || i === (hisLength - 1)) {
            const tempCount = {
              open_date: '本周',
              count: 0,
              sum_amount: 0,
              sum_comm: 0,
              sum_result: 0,
            }
            if (i === halfHisLength) {
              tempCount.open_date = '上周'
            }
            for (const index in tempHis) {
              if (tempHis[index].count.toString().indexOf('-') > -1) {
                tempCount.count -= parseFloat(tempHis[index].count.substring(1))
              } else {
                tempCount.count += parseFloat(tempHis[index].count)
              }
              if (tempHis[index].sum_amount.toString().indexOf('-') > -1) {
                tempCount.sum_amount -= parseFloat(tempHis[index].sum_amount.substring(1))
              } else {
                tempCount.sum_amount += parseFloat(tempHis[index].sum_amount)
              }
              if (tempHis[index].sum_comm.toString().indexOf('-') > -1) {
                tempCount.sum_comm -= parseFloat(tempHis[index].sum_comm.substring(1))
              } else {
                tempCount.sum_comm += parseFloat(tempHis[index].sum_comm)
              }
              if (tempHis[index].sum_result.toString().indexOf('-') > -1) {
                tempCount.sum_result -= parseFloat(tempHis[index].sum_result.substring(1))
              } else {
                tempCount.sum_result += parseFloat(tempHis[index].sum_result)
              }
            }
            tempCount.count = tempCount.count.toFixed(2)
            tempCount.sum_amount = tempCount.sum_amount.toFixed(2)
            tempCount.sum_comm = tempCount.sum_comm.toFixed(2)
            tempCount.sum_result = tempCount.sum_result.toFixed(2)
            tempHis.push(tempCount)
            hisList.push(tempHis)
            tempHis = []
          }
          i++
        }
        return hisList
      },
    },
    data() {
      return {
        loading: false,
        userMap: userMap, // 用户字段映射
        currentPage: 1,
        pageSize: 10,
        nowTime: '',
        type: 0,
        date: {
          time: '',
          date: '',
        },
        hisDetails: '',
      }
    },

    // 数据格式化
    filters: {},

    async created() {
      this.nowTime = this.time()
      this.type = this.$route.params.type
      if (this.type === 1) {
        this.date = this.$route.params.date
        await this.getHistoryDetails()
      } else {
        await this.fetchData()
      }
    },
    methods: {
      goBalanced(item) {
        this.$router.push({
          name: 'member_balanced',
          params: {
            date: this.date.time,
          },
        })
      },
      getHisDet(time, date) {
        this.reload()
        this.$router.push({
          name: 'member_history',
          params: {
            type: 1,
            date: {
              time: time,
              date: date,
            },
          },
        })
      },
      time() {
        var myDate = new Date()
        var y = myDate.getFullYear()
        console.log(y)
        var m = myDate.getMonth() + 1
        var d = myDate.getDate()
        if (y < 10) y = '0' + y
        if (m < 10) m = '0' + m
        if (d < 10) d = '0' + d
        var HMS = y + m + d
        return HMS
      },
      async fetchData() {
        await this.$store.dispatch('MemberOrdersHistory', {
          page: this.currentPage,
          'per-page': this.pageSize,
        })
      },
      async getHistoryDetails() {
        await this.$store.dispatch('HistoryDetails', { date: this.date.time })
          .then(response => {
            this.hisDetails = response
          })
      },
      // 当前页变化
      async pickerChange(value) {
        await this.fetchData()
      },
    },
    watch: {
      $route(to, from) {},
    },
  }
</script>
<style scoped>
  .content {
    padding: 5px;
    cursor: pointer;
    margin-left: 190px;
    width: 884px;
  }
  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
    font-size:12px;
  }
  .myTable:last-child{
    margin-top: 20px;
  }
  .myTable th{
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
  }
  .myTable td{
    color: #131950;
    line-height: 25px;
    padding: 2px 5px;
    box-sizing: border-box;
    text-align: center;
    width: 20%;
  }
  .myTableTime:hover{
    color:red;
    cursor: pointer;
  }
  .redSpan{
    color:red;
    font-weight: bold;
  }
  .blueSpan{
    color:blue;
    font-weight: bold;
  }
</style>

